<template>
  <div>
    <!-- 设计信息 -->
    <el-row class="modelLight">
      <el-col :span="24"
              class="modelLight-col">
        <el-input placeholder="项目名称"
                  v-model="keyword"
                  suffix-icon=""
                  class="normal-input">
          <el-button type="primary"
                     slot="append"
                     icon="el-icon-search"
                     @click="sosoData(keyword)"
                     class="normal-btn"></el-button>
        </el-input>
        <LocationSelect :locaData.sync="addresss"></LocationSelect>

      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="6"
                  v-for="(item, index) in data"
                  :key="index"
                  style="margin-bottom:15px">
            <router-link :to="{path:'/projectModel',query:{id:item.project_id,name:item.pro_name,proNum:item.pro_number}}">
              <el-card :body-style="{ padding: '8px' }"
                       style="width:100%;cursor:pointer">
                <div class="img_test"
                     style="padding:0px;background:#aaa;position:relative">
                  <img :src="item.url"
                       class="image"
                       style="background:#ccc">
                  <span class="time">{{item.update_time}}</span>
                </div>
                <div class="yard_title"
                     style="padding:14px 5px;overflow:hidden">
                  <span class="item_title"
                        style="float:left;font-size:14px;color:#333"
                        :title="item.pro_name">{{item.pro_name}}</span>
                  <!-- <span style="float:right;font-size:14px;color:#999">堆场数:{{item.count}}</span> -->
                </div>
              </el-card>
            </router-link>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="24"
              style="padding-top:40px ;text-align: center">
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[8]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      tableData: [],
      image: '../../static/img/111.jpg',
      currentPage: 1,
      pagesize: 8,
      total: 20,
      value: "",
      value2: '',
      value3: '',
      keyword: '',//搜索的内容
      data: [],
      province: [],
      city: [],
      area: [],
      pro_id: '',//省份id
      city_id: '',//城市id
      area_id: '',//地区id
      uuid: this.$route.query.uuid,
      project_id: this.$route.query.projects,
      address: '',
    }

  },
  methods: {
    handleSizeChange () {

    },
    handleCurrentChange (currentPage) {//分页功能
      axios.post('admin/yard/project', qs.stringify({ page: currentPage, projects: this.project_id, uuid: this.uuid }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.data = res.data.data.data

      }, err => {
      })
    },
    sosoData (data) {//搜索功能
      axios.post('admin/yard/project', qs.stringify({ search: data, projects: this.project_id, uuid: this.uuid }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.data = res.data.data.data
        this.total = res.data.data.count
        this.pagesize = res.data.data.limit
        this.currentPage = res.data.data.nowpage
      }, err => {
      })
    },
    startData () {//页面打开时数据获取及渲染
      axios.post('admin/yard/project', qs.stringify({ projects: this.project_id, uuid: this.uuid }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.data = res.data.data.data//卡片数据渲染
        this.total = res.data.data.count//获取数据总条数
        this.pagesize = res.data.data.limit//获取每页数据限制数
        this.currentPage = res.data.data.nowpage//获取当前页
      }, err => {
        console.log(err)
      })
    },
    getArea () {//获取省份数据
      axios.post('admin/area/getplace', {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.province = res.data.data
      }, err => {
      })
    },
    choosePro (data) {//获取城市数据
      this.pro_id = data
      axios.post('admin/area/getplace', qs.stringify({ area_id: data }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.city = res.data.data
        this.value2 = ""
        this.value3 = ""
      }, err => {
      })
    },
    chooseCity (data) {//获取地区数据
      this.city_id = data
      axios.post('admin/area/getplace', qs.stringify({ area_id: data }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.area = res.data.data
        this.value3 = ""
      }, err => {
      })
    },
    chooseArea (data) {//选择省市区进行数据筛选,进行表格数据渲染
      this.area_id = data
      axios.post('admin/yard/project', qs.stringify({ province_id: this.pro_id, city_id: this.city_id, distrit_id: this.area_id, projects: this.project_id, uuid: this.uuid }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;'
        }
      }).then(res => {
        this.data = res.data.data.data
        this.total = res.data.data.count
        this.pagesize = res.data.data.limit
        this.currentPage = res.data.data.nowpage
      }, err => {
      })
    },
    JumpPage (data) {
      this.axios.get('admin/base/codes/data', { params: { codeType: 'modelLifePath ' } }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      }).then(res => {
        this.pageUrl = res.data.data.data[0].content1 + res.data.data.data[1].content1 + '&projectId=' + data.project_id + '&pro_number=' + data.pro_number;
        window.open(this.pageUrl)

      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.startData()
    this.getArea()
    sessionStorage.setItem("uuid", this.$route.query.uuid);
  },
}
</script>
<style lang="scss" scoped>
.modelLight {
  padding: 20px;
  background: #fff;
  min-height: 800px;

  .modelLight-col {
    margin-bottom: 40px;
    width: 100%;
    float: left;

    .normal-input {
      width: 280px;
      float: right;
    }

    .normal-btn {
      color: #fff;
      background: #1890ff;
    }

    .normal-select {
      margin-right: 12px;
      width: 120px;
      float: right;
    }
  }
}

/deep/ .el-menu-item-group__title {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/deep/ .el-input__inner {
  text-align: left;
  font-size: 12px;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
}

.el-card {
  border: 0 !important;
  box-shadow: 0px 0px 0px 0px !important;
}

.time {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #fff;
  font-size: 14px;
}

.yard_title {
  width: 100%;
}

.item_title {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img_test {
  width: 100%;
  height: 175px;
}

.img_test img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>